import React from 'react';
import Loadable from 'react-loadable';
import '../App.css';

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (!isLoading) {
    return <div className='Myloading'>Loading...</div>;
  } else if (error) {
    return (
      <div className='Myloading'>
        Sorry, there was a problem loading the page.
      </div>
    );
  } else {
    return null;
  }
};
const SubjectManagement = Loadable({
  loader: () => import('../pages/SubjectManagement/index.jsx'),
  loading: MyLoadingComponent,
});
const ExamManagement = Loadable({
  loader: () => import('../pages/ExamManagement/index.jsx'),
  loading: MyLoadingComponent,
});
const PracticeManagement = Loadable({
  loader: () => import('../pages/PracticeManagement/index.jsx'),
  loading: MyLoadingComponent,
});
const ReadingTask = Loadable({
  loader: () => import('../pages/ReadingTask/index.jsx'),
  loading: MyLoadingComponent,
});
const PublishScore = Loadable({
  loader: () => import('../pages/PublishScore/index.jsx'),
  loading: MyLoadingComponent,
});
const MyExam = Loadable({
  loader: () => import('../pages/MyExam/index.jsx'),
  loading: MyLoadingComponent,
});
const MyPractice = Loadable({
  loader: () => import('../pages/MyPractice/index.jsx'),
  loading: MyLoadingComponent,
});
const Login = Loadable({
  loader: () => import('../pages/Login/index.jsx'),
  loading: MyLoadingComponent,
})
const DataConfig = Loadable({
  loader: () => import('../pages/DataConfig/index.jsx'),
  loading: MyLoadingComponent,
})
const routers = [
  {
    path: '/TmfsExam/ExamManagement',
    component: ExamManagement,
    key: 1,
  },
  {
    component: SubjectManagement,
    path: '/TmfsExam/SubjectManagement',
    key: 2,
  },
  {
    component: PracticeManagement,
    path: '/TmfsExam/PracticeManagement',
    key: 3,
  },
  {
    component: ReadingTask,
    path: '/TmfsExam/ReadingTask',
    key: 4,
  },
  {
    component: PublishScore,
    path: '/TmfsExam/PublishScore',
    key: 5,
  },
  {
    component: MyExam,
    path: '/TmfsExam/MyExam',
    key: 6,
  },
  {
    component: MyPractice,
    path: '/TmfsExam/MyPractice',
    key: 7,
  },
  {
    component: DataConfig,
    path: '/TmfsExam/DataConfig',
    key: 8,
  },
  {
    component: Login,
    path: '/TmfsExam/Login',
    key: 13,
  },
];

export default routers;
